<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- jq -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入）
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> -->

    <!-- 最新的 Bootstrap 核心 JavaScript 文件  -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>

<body>
    <form class="form-horizontal" role="form"
        style="border: 1px solid #000;width: 600px;height: 540px;margin:60px auto;"><br><br>
        <div class="form-group">
            <label for="inputtext1" class="col-sm-2 col-form-label">姓名昵称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputtext2">
                <span class="inputtext2"></span>
            </div>
        </div><br>
        <div class="form-group">
            <label for="inputtext3" class="col-sm-2 col-form-label">姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputtext3">
                <span class="inputtext4"></span>
            </div>
        </div><br>
        <div class="form-group">
            <label for="inputphoned3" class="col-sm-2 col-form-label">手机号码</label>
            <div class="col-sm-10">
                <input type="phone" class="form-control" id="inputphoned3">
                <span class="inputphoned1"></span>
            </div>
        </div><br>
        <div class="form-group">
            <label for="inputemail3" class="col-sm-2 col-form-label">邮箱</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputemail3">
                <span class="inputemail1"></span>
            </div>
        </div><br>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 col-form-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword1">
                <span class="inputPassword2"></span>
            </div>
        </div><br>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 col-form-label">确认密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3">
                <span class="inputPassword4"></span>
            </div>
        </div><br>

    </form>
    <button style="width:140px;height:60px;margin-left:900px;">提交</button>
    <style>
        .col-sm-10 {
            width: 70%;
        }

        .col-sm-2 {
            margin-left: 30px;
        }

        span {
            color: red
        }
    </style>
</body>
<script>
    $(function () {
        $("button").click(function () {
            fun()
        })
    })

    function fun() {

        //姓名

        var name = $("#inputtext3").val()
        var n = /^[\u4e00-\u9fa5]{1,}$/
        if (n.test(name)) {
            $(".inputtext4").text("输入正确")
        } else {
            $(".inputtext4").text("内容不符合验证规则【纯汉字】")
        }

        //手机号码

        var phone = $("#inputphoned3").val()
        var p = /^0?(13|14|15|17|18|19)[0-9]{9}$/
        if (p.test(phone)) {
            $(".inputphoned1").text("输入正确")
        } else {
            $(".inputphoned1").text("请输入正确的手机号")
        }

        //邮箱

        var email = $("#inputemail3").val()
        var e = /[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (e.test(email)) {
            $(".inputemail1").text("输入正确")
        } else {
            $(".inputemail1").text("请输入正确的邮箱")
        }

        //密码

        var pasd = $("#inputPassword1").val()
        var mm = /^\w{6,12}$/
        if (mm.test(pasd)) {
            $(".inputPassword2").text("输入正确")
        } else {
            $(".inputPassword2").text("字母与数字结合6-12位")
        }

        //确认密码

        var pasds = $("#inputPassword3").val()
        if (pasd !== pasds) {
            $(".inputPassword4").text("输入正确")
        } else {
            $(".inputPassword4").text("请和密码保持一致（字母与数字结合6-12位）")
        }
    }
</script>

</html>